<template>
 <div class="box">
        <div class="box-row-1">
            <el-form :model="seacrhform" ref="seacrhform">
                <div class="box-form">
                    <el-form-item label="岗位名称" class="displayClass">
                        <el-input v-model="seacrhform.post_name"  placeholder="请输入岗位名称"></el-input>
                    </el-form-item>
                    <el-form-item label="状态" class="displayClass">
                        <el-select v-model="seacrhform.status"  placeholder="岗位状态" clearable>
                            <el-option v-for="item in options" :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button class="el-button--mini" type="primary" icon="el-icon-search" @click="submitForm('ruleForm')">搜索</el-button>
                        <el-button class="el-button--mini" @click="resetForm('ruleForm')" icon="el-icon-refresh">重置</el-button>
                    </el-form-item>
                </div>
            </el-form>
        </div>

        <div class="box-row-2">
            <el-row>
                <el-col :span="12">
                    <div class="grid-content bg-purple-light">
                        <el-button icon="el-icon-search"  size="small" circle></el-button>
                        <el-button icon="el-icon-refresh" size="small" circle></el-button>
                    </div>
                </el-col>
            </el-row>
        </div>

        <div class="box-row-3">
            <el-table 
            :data="tableData"
            ref="dataTable"
            height="calc(100vh - 650px)"
            v-loading="isloading"
            style="width: 100%;margin-bottom: 20px;">
                <el-table-column
                    prop="post_code"
                    label="岗位编码" width="200">
                </el-table-column>
                <el-table-column
                    prop="post_name"
                    label="岗位名称" width="200">
                </el-table-column>
                <el-table-column
                    prop="post_sort"
                    label="岗位排序" width="200">
                </el-table-column>
                <el-table-column prop="status" label="状态" width="80" align="center">
                        <template slot-scope="scope">
                            <el-tag :type="scope.row.status == 0 ? 'primary' : 'danger'" disable-transitions>
                                <div v-if="scope.row.status == 0">正常</div>
                                <div v-else>停用</div>
                            </el-tag>
                        </template>
                </el-table-column>
            
                <el-table-column prop="create_time" label="创建时间" width="250" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column fixed="right" label="操作" align="center" >
                    <template slot-scope="scope">
                        <el-button @click="SelectChange(scope.row)" type="text" size="small" icon="el-icon-check">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="box-row-3-pagination">
                <Pagination  :pageindex="PageIndex" :pagesize="PageSize" :total="total"  @CurrentChange="CurrentChange" @SizeChange="SizeChange" />
            </div>
        </div>
    </div>
</template>

<script>
import Pagination from '../../../components/Pagination.vue'
export default {
    components:{
        Pagination
    },
data(){
    return{
        options:[{
                    value: '0',
                    label: '正常'
                },{
                    value:'1',
                    label:'停用'
                }
            ],
        seacrhform:{
            post_name:'',
            status:'',
            post_code:''
        },
        tableData: [],
        isloading:false,
        PageIndex:1,//当前页数
        PageSize:10,//每页显示条数
        total:0,//总条数
    }
},
methods:{
    submitForm(formName){
        this.dataBind();
    },
    resetForm(formName){
        this.$refs[formName].resetFields()
    },
    dataBind(){
            this.isloading=true
            this.$http.request({
                type:'get',
                url:'/api/PostManage',
                params:{
                    PageIndex:this.PageIndex,
                    PageSize:this.PageSize,
                    post_code:this.seacrhform.post_code,
                    post_name:this.seacrhform.post_name,
                    status:this.seacrhform.status
                }
            }).then(res=>{
                console.log(res.data);
                if(res.data.code==200){
                    this.tableData=res.data.data;
                    // let datas = res.data.data;
                    // this.optionTree= this.cvtTreeData(datas);
                    this.total=res.data.count
                }
            }).catch(err=>{
                this.ShowMsg('服务器异常','error');
                console.log(err)
            }).finally(()=>{
                this.isloading=false;
            })
        },
        SelectChange(e){
            this.$emit('SelectChange',e);
        },
        SizeChange(e){
            this.PageSize = e;
            console.log('1');
            //从第一页开始
            this.PageIndex = 1;
            this.dataBind();
        },
        CurrentChange(e){
            console.log('1');
            this.PageIndex = e;
            this.dataBind();
        },
},
created(){
this.dataBind();
}
}
</script>

<style>

</style>